import * as React from "react";
import { Router, BrowserRouter } from "react-router";
import { Provider, observer } from "mobx-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import Pages from "./Pages";
import "../i18n";
import "@styles/main.scss";
// 设置antd中文
import { ConfigProvider } from "antd";
import zh from "antd/es/locale/zh_CN"; // 中文

import { withTranslation, WithTranslation } from "react-i18next";

interface PropType {
  rootStore: any;
  t: any;
}

@observer
class APPComponent extends React.Component<PropType, WithTranslation> {
  render() {
    const { rootStore } = this.props;
    const { t } = this.props;

    const queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false,
          staleTime: 100 * 5,
          retry: false,
        },
      },
    });
    // 初始化请求接口
    // rootStore.fetchInit();
    return (
      <QueryClientProvider client={queryClient}>
        <ConfigProvider locale={zh}>
          <Provider rootStore={rootStore}>
            <BrowserRouter>
              <Pages />
            </BrowserRouter>
          </Provider>
        </ConfigProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    );
  }
}
export const App = withTranslation()(APPComponent);
